<template>
  <div class="hry-color">
    <div class="content-wrapper person-wrapper">
      <div class="person-nav">
        <div
          class="person-info"
          :style="{ background: 'url(' + bg2 + ') no-repeat' }"
        >
          <div class="info">
            <a-avatar
              :size="84"
              type="upload"
              class="avatar"
              :src="$api.imgUserUrl + avatar"
              v-if="avatar"
              @click="showUploadModal"
            ></a-avatar>
            <a-avatar
              :size="84"
              type="upload"
              icon="user"
              class="avatar"
              @click="showUploadModal"
              v-else
            ></a-avatar>
            <div class="tag">
              <a-tag v-if="checkStatus === '0'" color="#AAAAAA">未审核</a-tag>
              <a-tag v-else-if="checkStatus === '1' || checkStatus === '2'"
                >审核中</a-tag
              >
              <a-tag
                v-else-if="checkStatus === '3' || checkStatus === '4'"
                color="red"
                >审核不通过</a-tag
              >
              <a-tag v-else color="green">已审核</a-tag>
            </div>
          </div>
          <span class="name">{{ company }}</span>
        </div>
        <div class="person-slide">
          <ul>
            <li
              v-for="(item, index) in list"
              @click="goPage(item.routerName, item.isValidateStatus)"
              :class="changeStatus(item.routerName, item.isValidateStatus)"
              :key="index"
            >
              <span class="iconfont" :class="item.icon"></span>{{ item.name }}
              <span
                class="msg"
                v-show="item.routerName === 'message' && readNum !== 0"
              >
                <i class="iconfont iconxiaoxi msg-icon"
                  ><span>{{ readNum > 100 ? "99+" : readNum }}</span></i
                >
              </span>
            </li>
          </ul>
        </div>
      </div>
      <div class="person-content">
        <transition name="bounce">
          <router-view></router-view>
        </transition>
      </div>
    </div>
    <hry-upload
      field="file"
      @crop-upload-success="cropUploadSuccess"
      @crop-upload-fail="cropUploadFail"
      v-model="visible"
      :url="this.$api.uploadAvatar"
      :headers="headers"
      img-format="jpg"
      :width="200"
      :height="200"
    ></hry-upload>
  </div>
</template>

<script>
import Bg2 from "@/assets/image/bg2.jpg";
import { Avatar } from "ant-design-vue";
import "@/assets/fonticon/iconfont.css";
export default {
  name: "index",
  components: {
    aAvatar: Avatar,
    hryUpload: () => import("vue-image-crop-upload")
  },
  data() {
    return {
      bg2: Bg2,
      list: [
        {
          name: "公司资料",
          routerName: "companyInfo",
          icon: "icongongsiziliao1",
          isValidateStatus: false
        },
        {
          name: "安全设置",
          routerName: "person",
          icon: "iconanquanshezhi1",
          isValidateStatus: true
        },
        {
          name: "我的项目",
          routerName: "projectList",
          icon: "iconwodexiangmu",
          isValidateStatus: true
        },
        {
          name: "用款申请",
          routerName: "money",
          icon: "iconyongkuanshenqing",
          isValidateStatus: true
        },
        {
          name: "提现管理",
          routerName: "withdraw",
          icon: "icontixianguanli",
          isValidateStatus: true
        },
        {
          name: "充值记录",
          routerName: "recharge",
          icon: "iconchongzhiguanli",
          isValidateStatus: true
        },
        {
          name: "项目回款",
          routerName: "back",
          icon: "iconxiangmuhuikuan",
          isValidateStatus: true
        },
        {
          name: "消息通知",
          routerName: "message",
          icon: "iconxiaoxitongzhi",
          isValidateStatus: true
        }
      ],
      avatar: "",
      headers: {
        token: this.$crypto.getAES(localStorage.getItem("ctoken"))
      },
      visible: false
    };
  },
  methods: {
    showUploadModal() {
      if (this.checkStatus === "5") {
        this.visible = true;
      }
    },
    cropUploadSuccess(jsonData) {
      this.avatar = jsonData.data.fileNameSrc;
      this.$message.success("上传成功");
      this.visible = false;
    },
    cropUploadFail() {
      this.$message.error("上传失败");
    },
    getAvatar() {
      if (this.checkStatus === "5") {
        this.$ajax
          .post(this.$api.getAvatar)
          .then(res => {
            this.avatar = res.data.avatar;
          })
          .catch(err => {
            this.$message.error(err);
          });
      }
    },
    goPage(routerName, isValidateStatus) {
      if (isValidateStatus) {
        if (this.checkStatus === "5") {
          this.$router.push({ name: routerName });
        } else {
          return false;
        }
      } else {
        this.$router.push({ name: routerName });
      }
    },
    changeStatus(routerName, isValidateStatus) {
      if (isValidateStatus) {
        if (this.checkStatus === "5") {
          return routerName === this.navRouterWeb ? "active" : "";
        } else {
          return "disabled";
        }
      } else {
        return routerName === this.navRouterWeb ? "active" : "";
      }
    }
  },
  created() {
    this.getAvatar();
  },
  computed: {
    navRouterWeb() {
      return this.$store.state.navRouterWeb;
    },
    checkStatus() {
      return this.$store.state.checkStatus;
    },
    company() {
      return this.$store.state.company;
    },
    readNum() {
      return this.$store.state.readNum;
    }
  }
};
</script>

<style scoped lang="less">
.hry-color {
  background: @backGroundColor;
  padding: 3.68rem 0rem 14.75rem 0rem;
  .person-wrapper {
    .flex_content();
    .person-nav {
      width: 17.31rem;
      margin-right: 2rem;
      .person-info {
        text-align: center;
        padding: 1.75rem 3.69rem;
        margin-bottom: 2rem;
        background: @white;
        height: 13.19rem;
        border-radius: 0.2rem;
        .info {
          position: relative;
          .avatar {
            background: #246ec3;
            webkit-box-shadow: 0 0 0 4px #e1dddd;
            -moz-box-shadow: 0 0 0 4px #e1dddd;
            box-shadow: 0 0 0 4px #e1dddd;
          }
          .tag {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 0);
            height: 1.19rem;
            margin: 0;
            .ant-tag {
              border-radius: 5px;
              margin: 0;
            }
          }
        }
        .name {
          font-size: 1.13rem;
          font-weight: bold;
          color: rgba(35, 35, 35, 1);
          margin-top: 1rem;
          display: inline-block;
          line-height: 1.47rem;
          letter-spacing: 0.1rem;
        }
      }
      .person-slide {
        background: @white;
        border-radius: 1rem;
        overflow: hidden;
        width: 17.31rem;
        ul {
          font-size: 1rem;
          position: relative;
          padding: 0.5rem 0.94rem;
          li {
            position: relative;
            padding: 1.125rem 3.75rem;
            margin: 0.1rem 0;
            border-radius: 1rem;
            cursor: pointer;
            .iconfont {
              font-size: 1rem;
              display: inline-block;
              margin-right: 0.56rem;
            }
            &:hover {
              background: @primary-color;
              color: @white;
              .msg {
                color: @white;
              }
            }
            .msg {
              position: absolute;
              top: 36%;
              transform: translate(0, -50%);
              right: 3.5rem;
              color: #d84545;
              .msg-icon {
                position: relative;
                font-size: 1.38rem;
                margin-right: 0;
                span {
                  position: absolute;
                  font-size: 0.75rem;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                }
              }
            }
          }
          .active {
            background: @primary-color;
            color: @white;
            .msg {
              color: @white;
            }
          }
          .disabled {
            cursor: not-allowed;
            &:hover {
              background: white;
              color: #333333;
              .right {
                color: gray;
              }
            }
          }
        }
      }
    }
    .person-content {
      flex: 1;
      background: @white;
      border-radius: 1rem;
      > div {
        padding: 2.625rem 5rem;
      }
    }
  }
}
</style>
